<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-page-header content="用户详情" @back="$router.back()" />
		</el-card>		
		<el-card class="mt-4 !border-none" header="基本资料" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
				<el-form-item label="头像：">
					<div>
						<div>
							<material-picker v-model="formData.avatar" :limit="1" />
						</div>
						<div class="form-tips">建议尺寸：240*240px</div>
					</div>
				</el-form-item>
<!--				<el-form-item label="账号：">-->
<!--					<el-input v-model="formData.account" class="w-[280px]">-->
<!--					</el-input>-->
<!--				</el-form-item>-->
				<el-form-item label="姓名：">
					<el-input v-model="formData.real_name" class="w-[280px]">
					</el-input>
				</el-form-item>
				<el-form-item label="联系电话：">
					<el-input v-model="formData.mobile" class="w-[280px]">
					</el-input>
				</el-form-item>
				<el-form-item label="科室信息：" prop="department">
					<el-cascader :options="optionsData.department" clearable v-model="formData.department" filterable />
				</el-form-item>
				<el-form-item label="注册来源："> {{ formData.channel }} </el-form-item>
				<el-form-item label="注册时间："> {{ formData.create_time }} </el-form-item>
			</el-form>
		</el-card>
	<footer-btns>
		<el-button type="primary" @click="handleSave">保存</el-button>
	</footer-btns>
	</div>
</template>

<script lang="ts" setup name="consumerDetail">
	import type { FormInstance } from 'element-plus'
	import { getUserDetail, userEdit } from '@/api/consumer'
	import { isEmpty } from '@/utils/util'
	import useMultipleTabs from '@/hooks/useMultipleTabs'
	
	import {
		departmentList
	} from '@/api/room/room_department_device'
	import { useDictOptions } from '@/hooks/useDictOptions'
	const { optionsData } = useDictOptions<{
		department : any[]
	}>({
		department: {
			api: departmentList
		}
	})
	
	const route = useRoute()
	const router = useRouter()
	const { removeTab } = useMultipleTabs()
	
	const formData = reactive({
		id:0,
		avatar: '',
		channel: '',
		create_time: '',
		login_time: '',
		mobile: '',
		nickname: '',
    real_name: '',
		department: [],
		sn: '',
		account: '',
		user_money: ''
	})
	const formRef = shallowRef<FormInstance>()

	const getDetails = async () => {
		const data = await getUserDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}

	const handleEdit = async (value : string, field : string) => {
		if (isEmpty(value)) return
		await userEdit({
			id: route.query.id,
			field,
			value
		})
		getDetails()
	}
	const handleSave = async () => {
		await userEdit(formData)
		removeTab()
		router.back()
	}

	getDetails()
</script>